<template>
  <el-card>
    <div class="user">
      <!-- <el-avatar :size="50" :src="avatar"></el-avatar> -->
      <div class="avator">
          <img :src="avatar" alt="">
      </div>
      <h1 class="me-author-name">一碗鱼汤面</h1>
    </div>
    <div class="me-author-description">
      <span><i class="el-icon-location-outline"></i> &nbsp;南京&雨花台</span>
      <span><i class="me-icon-job"></i> &nbsp;Java工程师</span>
    </div>
    <div class="me-author-tool">
      <i @click="showTool(qq)" :title="qq.title" class="me-icon-QQ"></i>
      <i @click="showTool(gitee)" :title="gitee.title" class="me-icon-github"></i>
    </div>
  </el-card>
</template>

<script>
  export default {
    name: 'CardMe',
    data() {
      return {
        qq: {title: 'QQ', message: '137481086'},
        avatar: "http://121.41.230.131:3344/1.jpg",
        gitee: {
          title: 'gitee',
          message: '<a target="_blank" href="https://gitee.com/yangyu-java/yangyu-blog">https://gitee.com/yangyu-java/yangyu-blog</a>'
        }
      }
    },
    methods: {
      showTool(tool) {
        this.$message({
          duration: 0,
          showClose: true,
          dangerouslyUseHTMLString: true,
          message: '<strong>' + tool.message + '</strong>'
        });
      }
    }
  }
</script>

<style scoped>
  .me-author-name {
    width: 100%;
    text-align: center;
    font-size: 30px;
    border-bottom: 1px solid #5FB878;
  }

  .me-author-description {
    padding: 8px 0;
  }

  .me-icon-job {
    padding-left: 16px;
  }

  .me-author-tool {
    text-align: center;
    padding-top: 10px;
  }

  .me-author-tool i {
    cursor: pointer;
    padding: 4px 10px;
    font-size: 30px;
  }
.user {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.avator {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 5px;
}
.avator img {
    width: 100%;
    height: 100%;
}
</style>